<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1事件的基本使用</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- shortcut icon”这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像,才有必要添加第二行使用icon -->
        <link rel ="shortcut icon" type="image/x-icon" href="../static/vue.jpg">
    </head>

    <body>
        <div id="root">
            <h1>欢迎来到{{name}}</h1>
            <button v-on:click="showInfo">华人牌手机</button><br/> <!-- v-on:click="":点击事件 -->
            <button @click="vivo">简写</button><br/> <!-- v-on简写为@ -->
            <button @click="iqoo(6)">传入参数</button><br/> <!-- 传入参数 -->
            <button @click="text($event , 6)">传入参数的同时传入event</button> <!-- 传入参数的同时传入event -->
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

        const vm = new Vue({
            el:'#root',
            data:{
                name:'未来世界',
            },
            methods:{
                 //事件的第一种形式
                showInfo(event){ //event：事件中的对象
                    // console.log(event.target.innerText) //打印showInfo对象，输出结果为：华人牌手机
                    // console.log(this === vm) //输出结果：true，this就是这个vm的实例
                    alert("傻妞为您服务，请输入开机密码")
                },
                //事件的第二种形式，写成=>的形式无法获取当前的vm实例，只能向外找，不建议写
                vivo:(event)=>{ //event：事件中的对象
                    // console.log(this === vm) //输出结果：false，第二种形式的时候this就不是vm实例
                    // console.log(this) //这个时候的this是Window
                    alert("王者荣耀专用手机")
                },
                iqoo(number){ //event：事件中的对象
                    console.log(number) //打印传入的参数number：6
                },
                text(event , number){ //event：事件中的对象
                    console.log(number) //打印传入的参数number：6
                    alert("event和参数输出")
                },
            }
        })
    </script>
</html>